<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Devices</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='control_style.css') }}"/>
    <script src="{{ url_for('static', filename='jquery-1.10.2.js') }}"></script>
</head>
<body>
<div id="" class="left full-height">
    <!-- logo -->
    <div id="" class="logo-bar">
        <div id="" class="ele full-height">
            <h1 style="color: #ededed;">LOGO</h1>
        </div>

    </div>
    <!-- tabs -->
    <div id="" class="tab-bar">
        <div style="height: 50px;width: 100%"></div>
        <a href="/devices">
            <div id="" class="tab-content choix">
                DEVICES
            </div>
        </a>
        <a href="/types">
            <div id="" class="tab-content no-choix">
                TYPE
            </div>
        </a>
        <a href="/conn">
            <div id="" class="tab-content no-choix">
                CONNECTIONS
            </div>
        </a>
        <a href="/log">
            <div id="" class="tab-content no-choix">
                LOG
            </div>
        </a>
        <a href="/groups">
            <div id="" class="tab-content no-choix">
                GROUPS
            </div>
        </a>
    </div>
</div>

<div id="" class="right full-height">
    <!-- admin -->
    <div id="" class="admin-bar">

    </div>
    <!-- main content -->
    <div id="" class="content-background">
        <div class="content-box">
            <div id="" class="content-control-box">
                <button type="button" class="btn" onclick="jump('/add_device')">ADD</button>
            </div>
            <div id="" class="data-box" style="overflow-y: auto">
                <table class="table_style" cellspacing=0 id="tab">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Address</th>
                        <th></th>
                        <th>Status</th>
                    </tr>
                    {% for device in devices %}
                    <tr>
                        <td>{{ device[0] }}</td>
                        <td>{{ device[1] }}</td>
                        <td>{{ td[device[2]] }}</td>
                        <td>{{ device[3] }}</td>
                        <td style="text-align: left">
                            <button class="btn-small"
                                    onclick="jump('/modify_device/{{ device[0] }}')">
                                modify
                            </button>
                            <button class="btn-small" onclick="confirm_delete_device({{ device[0] }})">delete
                            </button>
                            <button class="btn-small" onclick="jump('/modify_device_interior/{{ device[0] }}')">修改配置
                            </button>
                            {#
                            <button class="btn-small" onclick="jump('/device_control/{{ device[0] }}')">控制#}
                                {#
                            </button>
                            #}
                            {% if td[device[2]] =="CAMERA" %}
                            <button class="btn-small" id="playView{{ device[0] }}"
                                    onclick="jump('/live_device/{{ device[0] }}')">播放
                            </button>
                            {% endif %}
                        </td>
                        <td>连接中...</td>
                    </tr>
                    {% endfor %}
                </table>
                {#
                <div id="" style="position: absolute;right: 30px;bottom: 20px;">#}
                    {#
                    <ul class="pagination">#}
                        {#
                        <li><a href="#">«</a></li>
                        #}
                        {#
                        <li><a class="active" href="#">1</a></li>
                        #}
                        {#
                        <li><a href="#">2</a></li>
                        #}
                        {#
                        <li><a href="#">3</a></li>
                        #}
                        {#
                        <li><a href="#">4</a></li>
                        #}
                        {#
                        <li><a href="#">5</a></li>
                        #}
                        {#
                        <li><a href="#">6</a></li>
                        #}
                        {#
                        <li><a href="#">7</a></li>
                        #}
                        {#
                        <li><a href="#">»</a></li>
                        #}
                        {#
                    </ul>
                    #}
                    {#
                </div>
                #}

            </div>
        </div>
    </div>
</div>

</body>
<script>
    function jump(url){
        window.location.href=url;
    }
    function create_xhr() {
        let XHR = [  //兼容不同浏览器和版本得创建函数数组
            function () {
                return new XMLHttpRequest()
            },
            function () {
                return new ActiveXObject("Msxml2.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Msxml3.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }
        ];
        let xhr = null;
        //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
        for (let i = 0; i < XHR.length; i++) {
            try {
                xhr = XHR[i]();
            } catch (e) {
                continue  //如果发生异常，则继续下一个函数调用
            }
            break;  //如果成功，则中止循环
        }
        return xhr;  //返回对象实例
    }
    //document.getElementById('zhezhao').style.display="none";

    function confirm_delete_device(device_id) {
        let msg = "您真的确认要删除编号" + device_id + "这台设备吗？"
        let command = {
            "id": device_id
        }
        console.log(command)

        if (confirm(msg) == true) {
            let xhr = create_xhr();
            xhr.open("POST", "/equipment/deleteEquipment", true)
            xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
                if (xhr.readyState == 4) {  //监听readyState状态
                    if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                        let result = xhr.responseText //接收数据
                        console.log(result);
                        if (result == "success") {
                            alert("设备" + device_id + "已删除")
                            location.reload();
                        } else {
                            alert(result)
                        }
                    }
                }
            }
            xhr.send(JSON.stringify(command))
        }
    }
    status()

    function status(){
        var modifyParamsData = {}
            modifyParamsData["sender"] = "主控界面"
            modifyParamsData["command"] = {"target": "GetStatus"}
            let tab_length = document.getElementById("tab").rows.length;

            for (let i = 1; i < tab_length; i++) {
                let addresseeId = document.getElementById('tab').rows[i].cells[0].innerText;
                modifyParamsData["addresseeId"] = addresseeId
                $.ajax({
                type: "POST",
                url: "/equipment/statusEquipment",
                'data': JSON.stringify(modifyParamsData),
                dataType: "json",
                'processData': false,
                'contentType': 'application/json',
                success: function (data) {
                    console.log(data.data.status)
                    if(data.data.status == 1){
                        document.getElementById('tab').rows[i].cells[5].innerText = '在线';
                    }else{
                        document.getElementById('tab').rows[i].cells[5].innerText = '离线';
                    }
                }
            });
            }
    }


























</script>
</html>